<template>
  <div class="query-block">
    <el-radio-group v-model="conditions.time" @change="timeSelectChange">
       <el-radio :label="item.label" v-for="(item, idx) in timeOptions" :key="idx">
         <span>{{item.name}} 
              <div v-show="item.label === -1 && conditions.time === -1 && timeParam.customOption !== null" class="custom-time">
           <div>{{startTime}}</div>
           <div>至 {{endTime}}</div>
         </div>
         </span>
       </el-radio>
    </el-radio-group>
    <el-radio-group v-model="conditions.region" @change="regionSelectChange">
       <el-radio :label="item.label" v-for="(item, idx) in regionOptions" :key="idx">
         <span>
           {{item.name}}
            <span v-show="item.label === -1 && conditions.region === -1 && regionParam.customOption !== null" class="custom-region">
           {{customRegion}}
         </span>
           </span>
       </el-radio>
    </el-radio-group>
    <!--选择时间范围-->
     <el-dialog
  title="选择自定义时间范围"
  :visible.sync="timeParam.dialogVisible"
  width="440px"
  :before-close="handleClose"
  :append-to-body="true"
  :show-close="false">
    <el-date-picker
      v-model="timeParam.customOption"
      type="datetimerange"
      :picker-options="timeParam.pickerOptions"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      align="right">
    </el-date-picker>
  <span slot="footer" class="dialog-footer">
    <el-button @click="timeSelectCancel">取 消</el-button>
    <el-button type="primary" @click="timeSelectConfirm">确 定</el-button>
  </span>
</el-dialog>
<!--选择地区-->
  <el-dialog
   title="选择区域"
  :visible.sync="regionParam.dialogVisible"
  width="440px"
  :before-close="handleClose"
  :append-to-body="true"
  :show-close="false">
  <div  class="xdh-tree query-block__tree">

     <el-tree :data="regionTree" node-key="qhdm" :props="{label:'qhmc', children: 'children'}"
         default-expand-all>
           <div class="custom-tree-node" slot-scope="{node,data}">
              <div :class="{node: true,active: data.qhdm === regionParam.customOption}" @click="selectNode(node,data)">
                {{data.qhmc}}{{node.isLeaf ? `(${data.sl || 0})`: ''}}
                </div>
           </div>
    </el-tree>
  </div>
    <span slot="footer" class="dialog-footer">
    <el-button @click="regionSelectCancel">取 消</el-button>
    <el-button type="primary" @click="regionSelectConfirm">确 定</el-button>
  </span>
  </el-dialog>
  </div>
</template>
<script>
import timePickerOptions from '@/helper/timePickerOptions'
import dateFormat from '@/utils/date'
import {mapState} from 'vuex'
import {GET_REGIONS} from '@/base/types'
import {listToTree} from '@/utils/convert'
export default {
    data () {
      return {
        timeParam: {
          pickerOptions: timePickerOptions,
          dialogVisible: false,
          customOption: null,
          oldSelect: 0
        },
        regionParam: {
          dialogVisible: false,
          customOption: null,
          oldSelect: 0
        },
        conditions: {
          time: 0,
          region: 1
        },
        timeOptions: [
          {label: 0, name: '全部'},
          {label: 7, name: '近一周'},
          {label: 15, name: '近半个月'},
          {label: 30, name: '近一个月'},
          {label: -1, name: '自定义'}
        ],
          regionOptions: [
          {label: 1, name: '全国'},
          {label: 2, name: '本省'},
          {label: 3, name: '本市'},
          {label: -1, name: '自定义'}
        ]
      }
    },
    watch: {
    },
    computed: {
      ...mapState(['sRegion']),
       customRegion() {
         if(!this.regionParam.customOption || !this.sRegion.searchResultCounts) {
           return '';
         } else {
           let obj = this.sRegion.searchResultCounts.list.find(r => r.dqdm === this.regionParam.customOption)
           if(obj) {
             return obj.qhmc;
           }else {
             return '';
           }
         }
       },
       regionTree() {
          if(!this.sRegion.regions) {
            return [];
          }
        let regions = JSON.parse(JSON.stringify(this.sRegion.regions.list));
        if(this.sRegion.searchResultCounts) {
           regions.forEach(item => {
             let countObj = this.sRegion.searchResultCounts.list.find(r => r.dqdm === item.qhdm);
             if(countObj) {
               item.sl = countObj.sl;
             }
           })
        }
        let tree = listToTree(regions, '0', 0, {
            id: 'qhdm', 
            parentId: 'sjdm', 
            children: 'children',
            level: 'level',
            order: 'order'
          })
        return tree
      },
      startTime() {
          if(!this.timeParam.customOption) {
            return '';
          } else {
            return dateFormat(this.timeParam.customOption[0], 'yyyy-MM-dd hh:mm:ss')
          }
      },
      endTime() {
          if(!this.timeParam.customOption) {
            return '';
          } else {
            return dateFormat(this.timeParam.customOption[1], 'yyyy-MM-dd hh:mm:ss')
          }
      }
    },
    methods: {
       selectNode(node, data) {
        if(node.isLeaf) {
          this.regionParam.customOption = data.qhdm;
          let query = Object.assign({}, this.mySearchResult_query, {region: this.regionParam.customOption})
          this.$store.commit('mySearchResult_query', query)
        }
      },
      timeSelectCancel() {
       this.timeParam.dialogVisible = false;
       this.conditions.time = this.timeParam.oldSelect;
      },
      regionSelectCancel() {
       this.regionParam.dialogVisible = false;
       this.conditions.region = this.regionParam.oldSelect;
      },
      timeSelectConfirm() {
       this.timeParam.dialogVisible = false;
       this.setQuery();
      },
      regionSelectConfirm() {
       this.regionParam.dialogVisible = false;
       this.setQuery();
      },
      timeSelectChange(item) {
        if(item === -1) {
          this.timeParam.dialogVisible = true;
        } else {
          this.timeParam.oldSelect = item;
          this.setQuery();
        }
      },
      setQuery() {
        let queryParam = {};
        if(this.conditions.time === -1) {
          queryParam.kssj = dateFormat(this.timeParam.customOption[0], 'yyyy-MM-dd HH:mm:ss');
          queryParam.jssj = dateFormat(this.timeParam.customOption[0], 'yyyy-MM-dd HH:mm:ss');
        } else {
          queryParam.sjd = this.conditions.time;
        }
        if(this.conditions.region === -1) {
          queryParam.fw = this.regionParam.customOption;
        } else {
          queryParam.fw = this.conditions.region;
        }
          this.$store.commit('mySearchBar_query', queryParam)
      },
      regionSelectChange(item) {
        if(item === -1) {
          this.regionParam.dialogVisible = true;
        } else {
          this.regionParam.oldSelect = item;
        }
        this.setQuery();
      }
    },
    created() {
       this.$store.dispatch(GET_REGIONS);
      this.$store.commit('mySearchBar_query', {
            sjd: this.conditions.time,
            fw: this.conditions.region
           })
           console.log(this.$store.state)
    }
  }
</script>